<template>
  <div class="">
    <Row style="margin: 10px 0px;">
      <label style="margin-left: 10px;">题目类型</label>
      <Select v-model="condition.questype" style="width:100px">
        <Option v-for="item in questypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <label>题目</label>
      <Input placeholder="请输题目" clearable style="width: 200px" v-model="condition.questitle"></Input>
      <label>考试时间</label>
      <DatePicker type="daterange" v-model="condition.submitdate" :options="submitdateoptions" placement="bottom-end" placeholder="请选择考试时间段" style="width: 200px"></DatePicker>
      <!-- <label style="margin-left: 10px;">一级类型</label>
      <Select v-model="condition.quesparentname" style="width:100px">
        <Option v-for="item in conqpn" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <label style="margin-left: 10px;">二级类型</label>
      <Select v-model="condition.quesname" style="width:100px">
        <Option v-for="item in conqn" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select> -->
      <!-- <label style="margin-left: 10px;">类型</label> -->
      <!-- <Cascader :data="data" v-model="value1" style="width: 200px;display: inline-block;"></Cascader> -->
      <span style="margin: 0px 10px;">
        <button type="button" class="ivu-btn ivu-btn-primary" @click="search()">
          <i class="ivu-icon ivu-icon-search"></i>
          <span>查询</span>
        </button>
      </span>
      <!-- <span style="margin: 0px 10px;">
        <button type="button" class="ivu-btn ivu-btn-primary" @click="addSuject()">
          <i class="ivu-icon ivu-icon-plus"></i>
          <span>新增</span>
        </button>
      </span> -->

      <Upload action="rs/exam/upload" class="fr" :on-success="upSuccess" :on-error="upError" :on-progress="upProgress" :show-upload-list="false">
        <Button type="ghost" icon="ios-cloud-upload-outline">批量导入</Button>
      </Upload>
    </Row>
    <Table :columns="columns" :data="model.rows" border></Table>
    <Row style="margin: 10px 0px;">
        <Page :total="model.count" :page-size="model.pageSize" show-elevator style="text-align: center;" @on-change="loadPage"></Page>
    </Row>

    <Modal :width="900" v-model="show" title="题目设置" @on-visible-change="visibleChange" :mask-closable="false">
      <Form ref="formValidate" :model="ques" :label-width="150">
        <FormItem label="上级题库名称">
          <Select v-model="ques.quesparentname">
            <Option v-for="item in quesparentnames" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="本级级题库名称">
          <Select v-model="ques.quesname">
            <Option v-for="item in quesnames" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="试题类型" >
            <RadioGroup v-model="ques.questype" >
                <Radio label="单选题">单选题</Radio>
                <Radio label="多选题">多选题</Radio>
                <Radio label="判断题">判断题</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="题目" prop="userName">
            <Input v-model="ques.questitle" type="textarea" :rows="2" placeholder="输入题目..."></Input>
        </FormItem>
        <FormItem label="选项" prop="userName" v-if="ques.questype === '判断题'">
          <RadioGroup v-model="ques.questitle">
              <Radio label="正确" disabled>正确</Radio>
              <Radio label="错误" disabled>错误</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="选项" prop="userName" v-if="ques.questype !== '判断题'">
          <Input v-model="ques[item.key]" class="mg-top-bottom-10" v-for="(item, index) in options" :key="item.value">
              <span slot="prepend">{{item.value}}</span>
              <span slot="append" @click="deleteOption(index)" style="cursor: pointer;" v-show="index === options.length - 1">删除</span>
          </Input>
          <Button type="primary" size="large" long  @click="addOption()" v-show="!(options.length >= 10)">添加新选项</Button>
        </FormItem>
        <FormItem label="答案" ref="select">
          <Select v-model="ques.quesans" :multiple="ques.questype === '多选题'">
            <Option v-for="item in getquesanses(ques.questype)" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <!-- <FormItem label="答案" v-if="ques.questype === '多选题'">
          <Select v-model="ques.quesans" multiple>
            <Option v-for="item in getquesanses(ques.questype)" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem> -->
        <FormItem label="试题分析" prop="quesans">
          <Input v-model="ques.quesanl" type="textarea" :rows="4" placeholder="输入分析..."></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary"  long  @click="confirm()">保存</Button>

        <Button type="text" v-show="isModify && ques.quesstatus === '0'" @click="invalid('1')">作废本道题</Button>
        <Button type="text" v-show="isModify && ques.quesstatus === '1'" @click="invalid('0')">取消作废</Button>
      </div>
    </Modal>
    <Spin size="large" fix v-if="model.state === '查询'"></Spin>
  </div>

</template>
<script>
import axios from 'axios'
import PagedList from '@/plugins/PagedList.js'
    export default {
      title: '错题率统计',
        data () {
          // console.log('PagedList', PagedList);
            return {
              test: [],
              model: new PagedList('rs/sql/errorrate', 20,
              {items: "'*'", tablename: "'questionbank'", orderitem: "'id'"}),
              // model: new PagedList('rs/sql/adsf', 20),
              show: false,
              condition: {
                questitle: '',
                questype: '',
                submitdate: []
              },
              submitdateoptions: {
                  shortcuts: [
                      {
                          text: '一周内',
                          value () {
                              const end = new Date();
                              const start = new Date();
                              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                              return [start, end];
                          }
                      },
                      {
                          text: '一月内',
                          value () {
                              const end = new Date();
                              const start = new Date();
                              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                              return [start, end];
                          }
                      },
                      {
                          text: '三月内',
                          value () {
                              const end = new Date();
                              const start = new Date();
                              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                              return [start, end];
                          }
                      }
                  ]
              },
              // condition: {
              //   questitle: '',
              //   quesparentname: '',
              //   quesname: ''
              // },
              isModify: false, // 是否修改
              ques: {
                // 试题上级题库名称
              	quesparentname: '',
              	// 试题本级题库名称
              	quesname: '',
              	// 试题标题
              	questitle: '',
              	// 试题类型（单选，多选，判断)
              	questype: '单选题',
              	// 试题选项
              	quessel1: '',

              	// 试题选项
              	quessel2: '',
              	// 试题选项
              	quessel3: '',
              	// 试题选项
              	quessel4: '',
              	// 试题选项
              	quessel5: '',
              	// 试题选项
              	quessel6: '',
              	// 试题选项
              	quessel7: '',
              	// 试题选项
              	quessel8: '',
              	// 试题选项
              	quessel9: '',
              	// 试题选项
              	quessel10: '',
                // 试题答案
	              quesans: '',
                // 试题分析
	              quesanl: '',
                // 是否作废，1是作废
                quesstatus: '0',
              },
              options: [
                {key: 'quessel1', value: 'A'},
                {key: 'quessel2', value: 'B'},
                {key: 'quessel3', value: 'C'},
                {key: 'quessel4', value: 'D'}
              ],
              questypes: [
                {label: '全部', value: ''},
                {label: '单选题', value: '单选题'},
                {label: '多选题', value: '多选题'},
                {label: '判断题', value: '判断题'},
              ],
                columns: [
                  {
                    title: '序号',
                    type: 'index',
                    align: 'center',
                    width: 80
                  },
                  {
                      title: '类型',
                      key: 'questype',
                      align: 'center',
                      width: 100
                  },
                  {
                      title: '上级题库名称',
                      key: 'quesparentname',
                      align: 'center',
                      width: 200
                  },
                  {
                      title: '题目',
                      key: 'questitle'
                  },
                  {
                      title: '错误率',
                      key: 'rerrorsize',
                      width: 80,
                      align: 'center'
                  },
                  // {
                  //     title: '操作',
                  //     width: 100,
                  //     align: 'center',
                  //     render: (h, params) => {
                  //         return h('Button', {
                  //           props: {
                  //               type: 'text'
                  //           },
                  //           style: {
                  //             padding: '0'
                  //           },
                  //           on: {
                  //               click: () => {
                  //                   this.lookOrUpdate(params.row)
                  //               }
                  //           }
                  //         }, '相关操作');
                  //     }
                  // }
                ],
                subjects: []
            };
        },
        mounted () {
          this.search('1=1')
        },
        methods: {
            search () {
              let condition = '1=1'
              // questitle: '',
              // questype: '',
              // submitdate
              if (this.condition.questype.length > 0) {
                condition += ` and questype='${this.condition.questype}'`
              }
              if (this.condition.questitle.length > 0) {
                condition += ` and questitle like '%${this.condition.questitle}%'`
              }
              if (this.condition.submitdate[0]) {
                condition += ` and submitdate > '${this.$formatYMD(this.condition.submitdate[0])}'
                and  submitdate < '${this.$formatYMD(this.condition.submitdate[1])}'`
              }
              this.model.search(condition)
            },
            loadPage (index) {
                // console.log(`加载第${index}页数据`);
                this.model.loadPage(index)
            },
            addOption () {
              let index = this.options.length + 1
              this.options.push({key: `quessel${index}`, value: this.getChar(index)})
            },
            deleteOption (index) {
              this.options.pop()
            },
            getChar (index) {
              if (index === 1) {
                return 'A'
              } else if (index === 2) {
                return 'B'
              } else if (index === 2) {
                return 'C'
              } else if (index === 3) {
                return 'D'
              } else if (index === 4) {
                return 'E'
              } else if (index === 5) {
                return 'F'
              } else if (index === 6) {
                return 'G'
              } else if (index === 7) {
                return 'H'
              } else if (index === 8) {
                return 'I'
              } else if (index === 9) {
                return 'G'
              } else if (index === 10) {
                return 'K'
              }
            },
            getquesanses (val) {
              if (this.ques.questype === '判断题') {
                return [{label: '正确', value: '正确'}, {label: '错误', value: '错误'}]
              } else {
                let arr = []
                this.options.forEach(item => {
                  arr.push({label: item.value, value: item.value})
                })
                return arr
              }
            },
            // 保存
            confirm () {
              this.model.state = '查询'
              // 将this.ques发送的后台，成功后清空ques对象
              if (this.ques.questype === '多选题') {
                this.ques.quesans = this.ques.quesans.toString()
              }
              axios.post('rs/entity/questionbank', this.ques).then(res => {
                this.clearObj()
                this.model.refresh()
              })
            },
            lookOrUpdate (row) {
              this.isModify = true
              // console.log(this.$refs.select)
              debugger

              if (row.questype === '多选题' && typeof row.quesans === 'string') {
                row.quesans = row.quesans.split(',')
              }
              this.ques = Object.assign({}, row)
              // if (this.ques.questype === '多选题') {
              //   this.ques.quesans = this.ques.quesans.split(',')
              // }
              this.show = true
            },
            visibleChange (status) {
              if (!status) {
                this.clearObj()
              }
            },
            clearObj () {
              this.show =false
              this.isModify = false
              this.model.state = '正确'
              delete this.ques.id
              Object.keys(this.ques).forEach(key => {
                this.ques[key] = ''
              })
              this.ques.quesans = []
              this.ques.questype = '单选题',
              this.ques.quesstatus = '0'
            },
            // 作废本题
            invalid (str) {
              this.model.state = '查询'
              this.ques.quesstatus = str
              axios.post('rs/entity/questionbank', this.ques).then(res => {
                this.clearObj()
                this.model.refresh()
              })
            },
            upSuccess (res, file, fileList) {
              this.model.state = '正确'
              this.$Message.success({
                content: '批量导入成功'
              })
            },
            upError (error, file, fileList) {
              this.model.state = '正确'
              this.$Message.error({
                content: '上传失败'
              })
            },
            upProgress (events, file, fileList) {
              this.model.state = '查询'
            }
        },
        watch: {
          'ques.questype' (val) {
            if (!this.ques.id) {
              if (val === '多选题' && !(this.ques.quesans instanceof Array)) {
                this.ques.quesans = []
              } else {
                this.ques.quesans = ''
              }
            }
          },
          'ques.quesans.length' (val) {
            if (this.ques.quesans instanceof Array) {
              this.ques.quesans = this.ques.quesans.sort()
            }
          }
        },
        computed: {
          quesparentnames () {
            return this.$getOneParams()
          },
          quesnames () {
            if (this.ques.quesparentname) {
              return this.$getTwoParams(this.ques.quesparentname)
            }
            return []
          },
          conqpn () {
            return [{label: '全部', value: ''}, ...this.$getOneParams()]
          },
          conqn () { // 查询用的二级
            if (this.condition.quesparentname) {
              return [{label: '全部', value: ''}, ...this.$getTwoParams(this.condition.quesparentname)]
            }
            return [{label: '全部', value: ''}]
          },

        },
        filters: {
          sortChar (value) {
            return value.sort()
          }
        },
    };
</script>
<style lang="less">
  .ivu-select-single {
    .ivu-tag-checked {
      display: none;
    }
  }
</style>
